<template>
  <div>
    <v-header :showback="false">
      <SearchBox :type="1"></SearchBox>
    </v-header>
    <div class="article_label">
      <div class="top_slidemenu">
        <swiper :options="swiperArtMenu" class="swiper-container">
          <swiper-slide v-for="(c,index) in allCategory" :key='index'>
            <div class="free_label" @click="tabCateArticle(c.id,index)" :class="{clicked:activeid==c.id}">
              <span>{{c.name}}</span>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <v-list :load-handle='reload' :more-handle='loadmore' :more-handling='isLoading' :isend='isEnd' v-if="childCate&&childCate.length>0&&list&&list.length>0">
      <shoe-swiper v-show="showStockX" :shoes="stockX" class="gaps" :type="1"></shoe-swiper>
      <BrandSwiper :brandList="brandList" v-show="brandList&&brandList.length>0"></BrandSwiper>
      <ArticleUnit v-for="item in list" :key="item.id" :unit="item" class="gaps"></ArticleUnit>
    </v-list>
    <div v-if="!isLoading&&list.length<1" class="noNews">
      <img :src="noNews" alt="">
      <p>没有找到相关的资讯</p>
    </div>
  </div>
</template>
<script>
import { ArticleSearch, GetArticleCategory } from '../../../common/api/article'
import ArticleUnit from '../../templates/ArticleUnit'
import SearchBox from '../../templates/SearchBox'
import ShoeSwiper from '../../templates/ShoeSwiper'
import BrandSwiper from '../../templates/BrandSwiper'
// import { endWithGif } from '../../../common/util'
export default {
  data() {
    return {
      childCate: [],
      allCategory: [],
      list: [],
      isEnd: false,
      isLoading: false,
      pagedata: { sumcount: 0, pagesize: 0, pageindex: 1, type: 9, isrecommendover: 0 },
      swiperArtMenu: {
        slidesPerView: 7.5,
        freeMode: true
        // slideToClickedSlide: true
      },
      stockXcid: '',
      stockX: [],
      brandList: [],
      brandid: '',
      title: '',
      params: {},
      noNews: '//files.eyee.com/mcdn/static/img/no_news.png', // require('../../../assets/img/no_news.png'),
      activeid: ''
    }
  },
  mounted() {
    this.params = this.$route.params
    // let params = this.params
    this.getCate()
    this.reload()
  },
  components: {
    ArticleUnit,
    ShoeSwiper,
    BrandSwiper,
    SearchBox
  },
  computed: {
    showStockX() {
      // console.log('this.stockXcid',this.stockXcid)
      // console.log('this.stockX',this.stockX)
      return this.stockXcid == this.$route.params.id && this.stockX && this.stockX.length > 0
    },
    showBrand() {
      return this.brandid == this.$route.params.id && this.brandList && this.brandList.length > 0
    }
  },
  methods: {
    reload($el) {
      this.initShare({ type: 0 })
      this.list = []
      this.pagedata.pageindex = 1
      this.hasdata = 2
      this.isEnd = false
      this.req()
    },
    loadmore($el) {
      if (this.isEnd === true) {
        this.toast('已无更多')
      } else {
        this.pagedata.pageindex++
        this.req()
      }
    },
    req() {
      this.isLoading = true
      let page = this.pagedata
      let categoryid = this.$route.params.id
      if (this.$route.params.id == 0) {
        page.sorttype = 1
        categoryid = null
      }
      var postdata = page
      postdata.categoryid = categoryid
      // console.log('提交的参数', postdata)
      ArticleSearch(postdata)
        .then(res => {
          // console.log('NewSearch result', res);
          let result = res.article
          if (result) {
            if (result.pageindex == 1) this.list = result.list
            else this.list.push(...result.list)
            this.hasdata = 1
          }
          page.pageindex = result.pageindex
          page.sumcount = result.sumcount
          page.pagesize = result.pagesize
          if (page.pageindex * page.pagesize >= page.sumcount) this.isEnd = true
          if (res.stockx && res.stockx.length > 0) {
            this.stockX = res.stockx
            this.stockXcid = this.$route.params.id
          } else {
            this.stockX = []
            this.stockXcid = ''
          }
          if (res.brandlib && res.brandlib.length > 0) {
            this.brandList = res.brandlib
            this.brandid = this.$route.params.id
          } else {
            this.brandList = []
            this.brandid = ''
          }
          this.isLoading = false
        })
        .catch(e => {
          console.error('ArticleSearch', e)
          this.hasdata = 2
          this.isLoading = false
          this.toast('网络繁忙！')

          // this.toast(e && e.msg ? e.msg : ('error:' + e));
        })
    },
    tabCateArticle: function (id, index) {
      this.activeid = id
      this.brandList = []
      this.brandid = ''
      this.stockX = []
      this.stockXcid = ''
      if (this.$route.params.id != id) {
        this.$router.replace('/news/tab/' + this.params.parentid + '/' + id)
        this.reload()
      }
    },
    getCate() {
      let params = this.params
      var r = {
        id: '0',
        name: '人气'
      }
      this.allCategory.push(r)
      GetArticleCategory()
        .then(res => {
          if (res) {
            for (var i = 0; i < res.length; i++) {
              for (var j = 0; j < res[i].child.length; j++) {
                this.allCategory.push(res[i].child[j])
              }
              console.log(this.allCategory)
            }
            // if (params.parentid == res[0].id) {
            //   var r = {
            //     id: '0',
            //     name: '人气',
            //     parentid: res[0].id
            //   }
            //   res[0].child.unshift(r)
            //   this.childCate = res[0].child;
            //   this.title = res[0].name
            // } else if (params.parentid == res[1].id) {
            //   this.childCate = res[1].child;
            //   this.title = res[1].name
            // } else if (params.parentid == res[2].id) {
            //   this.childCate = res[2].child;
            //   this.swiperArtMenu.slidesPerView = 4;
            //   this.title = res[2].name

            // }
          } else {
            this.toast('网络繁忙')
          }
        })
        .catch(e => {
          console.error('GetArticleCategory', e)
          this.toast('网络失败')
        })
    }
  }
}
</script>
<style scoped>
.sc-input {
  width: 100%;
}
.article_label {
  height: 36px;
  line-height: 36px;
  position: relative;
}

.article_label .top_slidemenu {
  position: fixed;
  background-color: #fff;
  height: 36px;
  width: 100%;
  z-index: 1;
}

.free_label {
  color: #333;
  font-size: 14px;
  padding: 0;
  text-align: center;
}

.article_label .free_label.clicked > span {
  display: inline-block;
  height: 36px;
  padding: 0;
  border-bottom: 2px solid #333;
}

.noNews {
  width: 40vw;
  font-size: 0.75rem;
  text-align: center;
  margin: 30% auto;
}

.noNews img {
  width: 45%;
  margin: 0 auto;
  margin-bottom: 5%;
}
</style>
